<template>
  <div class="category-page">
    <!-- 分类页面的标题或头部 -->
    <van-nav-bar title="鲜花分类" />
    <van-search v-model="searchValue" placeholder="搜索商品" />

    <div class="goods-area">
      <!-- 侧边栏分类，使用实际的标签名称替换占位符 -->
      <van-sidebar v-model="activeIndex" @change="onSidebarChange">
        <van-sidebar-item title="生日鲜花" />
        <van-sidebar-item title="满天星" />
        <van-sidebar-item title="鲜花礼盒" />
        <van-sidebar-item title="玫瑰百合" />
        <van-sidebar-item title="开业乔迁" />
        <van-sidebar-item title="友谊鲜花" />
        <van-sidebar-item title="向日葵" />
        <van-sidebar-item title="感恩鲜花" />
        <!-- 可以继续添加更多分类 -->
      </van-sidebar>
      <div class="goods-body">
        <div v-for="goods in goodsList" :key="goods.id" class="goods">
          <img class="goods-img" :src="goods.img" />
          <div class="goods-right">
            <div class="goods-name">
              {{ goods.name }}
            </div>
            <div class="goods-ext">
              <div class="goods-price">{{ goods.price }}</div>
              <div class="goods-buy">购买</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 引入底部导航栏组件 -->
    <Tabbar />
  </div>
</template>

<script setup>
// 导入底部导航栏组件（确保路径正确）
import Tabbar from '@/components/common/Tabbar.vue';
import { onMounted, ref } from 'vue';

// 定义响应式变量
const activeIndex = ref(0); // 侧边栏当前选中的索引
const searchValue = ref(''); // 搜索输入框的值
const goodsList = ref([]);

// 查询商品信息，使用接口（这里为演示，直接赋值）
function LoadGoodsList() {
  goodsList.value = [
    {
      id: '1',
      name: '12朵卡布奇洛',
      img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/96843/37/34455/128247/64634990F89dda11b/ddbddd1344434049.jpg!q80.dpg',
      price: 58
    },
    {
      id: '2',
      name: '远方的祝福',
      img: 'https://bpic.588ku.com/back_origin_min_pic/20/11/06/50ff8a691ba74a8e9f79db8b41b3724b.jpg!/fw/750/quality/99/unsharp/true/compress/true',
      price: 126
    },
    {
      id: '3',
      name: '栀子花花束',
      img: 'https://oss.huawa.com/shop/placeorder/06778616055206619.jpg',
      price: 99
    },
    {
      id: '4',
      name: '白玫瑰花束',
      img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.SVj5nuT_f5l7uArN2oHppwHaFj?rs=1&pid=ImgDetMain',
      price: 133
    }
  ];
}

function LoadGoodsListForIndex1() {
  goodsList.value = [
    {
      id: '5',
      name: '白色满天星',
      img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.0x13ncoBXnVqPPTMqEwCsQD6D6?rs=1&pid=ImgDetMain',
      price: 50
    },
    {
      id: '6',
      name: '粉色满天星花束',
      img: 'https://img3.sixflower.com/3-20190821102221.jpg',
      price: 126
    },
    {
      id: '7',
      name: '满天星礼盒',
      img: 'https://img1.sixflower.com/201612613405269373.jpg',
      price: 99
    },
    {
      id: '8',
      name: '紫色满天星',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.FVtJXH48abWxXzvhAJAhhQHaHa?rs=1&pid=ImgDetMain',
      price: 133
    }
  ];
}

// 侧边栏变化时的处理函数
const onSidebarChange = (index) => {
  activeIndex.value = index;
  if (index === 0) {
    LoadGoodsList();
  } else if (index === 1) {
    LoadGoodsListForIndex1();
  }
  // 可以根据需要添加更多分类的处理逻辑
};

onMounted(() => {
  // 读取默认商品列表
  LoadGoodsList();
});
</script>

<style scoped>
.category-page {
  padding: 16px;
}

.goods-area {
  display: flex;
  width: 100%;
}

.goods-area .goods-body {
  padding: 10px;
  flex: 1;
}

.goods {
  display: flex;
  margin-bottom: 10px;
}

.goods .goods-img {
  margin-right: 10px;
  width: 80px;
  height: auto;
  max-height: 80px;
  border-radius: 4px; /* 修正为正确的数值格式 */
}

.goods .goods-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods .goods-name {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
}

.goods .goods-ext {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: red;
}

.goods .goods-price {
  font-weight: bold;
}

.goods .goods-buy {
  color: rgb(255, 42, 0); /* 添加购买按钮的样式 */
}
</style>